<template>
  <view class="balance-page">
    
    <!-- 余额卡片 -->
    <view class="balance-card">
      <view class="balance-title">账户积分</view>
      <view class="balance-amount">{{dataJson.score}}</view>
    </view>
  </view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
export default {
  data() {
    return {
      balance: 1258.50,
	  dataJson:{},
    }
  },
  onShow() {
  	this.getInfo()
  },
  methods: {
   
	getInfo(){
		request({
			url: 'user/score-list',
			method: 'get',
			
		}).then(res => {
			
			if (res.status == 200) {
				console.log(res.data)
				this.dataJson=res.data
			}else{
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		}).catch(err=>{
			uni.showToast({
				title: err.message,
				icon: 'none'
			})
		})
	}
    
    
  }
}
</script>

<style lang="scss" scoped>
.balance-page {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;
}

.nav-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
  .nav-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.balance-card {
  background: linear-gradient(135deg, #4a6cf7, #6a11cb);
  border-radius: 20rpx;
  padding: 40rpx;
  color: #fff;
  margin: 20rpx 0;
  box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .balance-title {
    font-size: 28rpx;
    opacity: 0.9;
  }
  
  .balance-amount {
    font-size: 72rpx;
    font-weight: bold;
    margin: 20rpx 0;
  }
  
  .balance-tips {
    font-size: 24rpx;
    opacity: 0.8;
  }
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin: 40rpx 0;
  
  .btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 32rpx;
    color: #fff;
    border: none;
    
    &.recharge {
      background-color: #4a6cf7;
      margin-right: 20rpx;
    }
    
    &.withdraw {
      background-color: #ff6b6b;
      margin-left: 20rpx;
    }
  }
}

.record-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .see-all {
      font-size: 26rpx;
      color: #999;
    }
  }
}

.record-list {
  .record-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .record-left {
      flex: 1;
    }
    
    .record-type {
      font-size: 30rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .record-time {
      font-size: 24rpx;
      color: #999;
    }
    
    .record-amount {
      font-size: 32rpx;
      font-weight: bold;
      
      &.income {
        color: #4a6cf7;
      }
      
      &.expense {
        color: #ff6b6b;
      }
    }
  }
  
  .no-records {
    text-align: center;
    padding: 50rpx 0;
    color: #999;
    font-size: 28rpx;
  }
}
</style>